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(57) Abstract: A graphical user interface, 
providing local drag and drop functions, is 
employedto position text and graphic elements 
on a video frame image. Frame number, 
elementposition, and element attributes are 
employed to create an enhancement file. 
Theenhancemenl file is empli)yed to embed a 
trigger, comprising information that identifies 
a video frame to be enhanced and a locator 
indicating where enhancement information 
may be accessed, into a streaming media file to 
CTcatc and enhanced streaming media file. An 
IITML/Java script page embeds a media player 
and includes software to detect a trigger,access 
enhancement information, and to render the 
enhancement information in responseto the 
trigger. 
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STREAMING MEDIA 
5 Cross Reference to Related Applications 

This application is based upon and claims priority of United States provisional 
application number 60/227,918 entitled "METHOD OF ENHANCING STREAMING 
MEDIA CONTENT " filed August 25, 2000 by Steve O. Maricel, United States 

10 provisional application serial number 60/227,930, now United States patent applications 

serial number , entitled "SYSTEM AND METHOD FOR WEB BASED 

ENHANCED INTERACTIVE TELEVISION CONTENT PAGE LAYOUT," filed 
August 21, 2001; and United States provisional application serial number 60/227,063, 
now United States patent application serial number , entitled "SYSTEM AND 

15 METHOD FOR DISTRIBUTION OF INTERACTIVE CONTENT TO MULTIPLE 
TARGETED PRESENTATION PLATFORMS," filed August,23, 2001. All of these 
applications are specifically incorporated herein by reference for all that they disclose and 
teach. 

Background 

20 

a. Field 

The present disclosure relates to streaming media, such as video streams transferred across 
the Internet, and more particularly, to a method and system that produces enhanced content that may 
be employed with streaming media. This disclosure discusses system and method for distribution of 
25 interactive content to multiple targeted presentation platforms. 

b. Description of the Background 

Streaming media files, such as video and sound files, may be hosted at a web 
server, and then may be transmitted over the Internet or other network to a requesting 
30 user. A streaming media player, such as Microsoft Windows® Media Player, may be 
employed to play a media file within a user's browser. While the images that may 
comprise streaming media content may be similar in appearance to television, 
enhancement of streaming media exhibits a number of differences. Enhancement refers to 
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the display of elements such as text, grajphics and images in conjunction with a video 
presentation. Display elements such as text, graphics, and images, for example, may be in 
proximity to a video image, or may overlay a video image. Display elements may also 
have links associated with them such that selection of the element, such as a displayed 
5 icon, or selection of the video area, may provide access to a web page, other information, 
or may launch another application. A prominent difference between television 
enhancement and enhancement of streaming media is that there are few tools and 
standards for streaming media enhancement, if any. In a manner similar to television, 
streaming media enhancements provide an opportunity for increased viewer satisfaction 
10 and also provide an opportunity for increased revenue through advertising, vendor 

association with a displayed product, and modification of advertising, such as local dealer 
information being displayed in corgunction with an advertisement. As such, a new 
method that provides a method and tools for streaming media enhancement is needed 

15 • . 

Summary of the Invention 

The present invention overcomes ttie disadvantages and limitations of the prior art 
by providing a system and method for creating enhanced content for streaming media and 
for outputting an enhancement file suited to streaming media. The authoring tools of the 
20 present invention provides an easy to use visual interface that allows a user to open a 
streaming video file, position the video to a desired frame, and add text and graphic 
enhancements. 

Commands employed to place ihe graphics and text enhancements are termed 
triggers. Each trigger uniquely specifies a text or graphic element, a location, and a time. 

25 A trigger may also contain an address where a graphic may be accessed. A text trigger 
may indicate font, font size, color and other attributes, plus location of where the text is 
displayed. Triggers may be grouped into a text file, using a scripting language such as 
XML for example, and then may be embedded into a streaming media file. The resultant 
enhanced streaming media file may bt saved on a web server. In addition to the enhanced 

30 streaming media file, an HTML / JavaScript "wrapper'' page is generated. The 
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HTML/Javascript page embeds a streaming media player object zs well as Ae software 
code necessary to interpret the embedded triggers. 

The invention therefore may comprise a method for creating an enhanced 
streaming media file comprising: defining a first window in a graphical user interface; 
5 displaying a streaming video file in a media player window contained in the first window; 
pausing the media player at one frame of a plurahty of frames comprising the streaming 
video file; placing a displayable element at a position in the first window employing a 
pointing device and employing a drag and drop fimction responsive to an input from the 
pointing device, the drag and drop function implemented locally in the graphical user 

10 interface; creating an enhancement file containing information related to the displayable 
element^ and the one frame; modifying a file containing a video stream to produce a 
modified video stream file containing a trigger comprising iiiformation that identifies a 
video frame to be enhanced and a locator indicating where enhancement information may 
be accessed; and embedding a media player and a software routine in a web displayable 

15 page wherein the media player is operable to display a video stream, and the software 
routine is operable to detect a trigger in the video stream, to access enhancement 
information employing a locator in the video stream, and to render enhancements defined 
by the enhancement infomnation. 

A user may access a web server with a browser and download the enhanced 

20 streaming media file and the HTML / JavaScript page. As the enhanced streaming media 
file plays, the wrapper HTML / JavaScript code interprets triggers contained in the , 
enhanced streaming media file and renders the graphics or text elements. The invention 
maybe implemented in a web browser, allowing remote editing and preview of 
enhancements. 

25 The invention may further comprise a system for creating an enhanced streaming 

media file comprising: a computer, a web browser; a graphical user iriterface disposed in 
the browser; a streaming media player disposed in the graphical user interface; a first 
software program associated with the graphical user interface that allows a user to select 
a displayable element and to position the displayable element over an image displayed by 

30 the streaming media player, the first software program further provides a fianction to alter 
the position of the displayable element in response to input from a pointing device, the 
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function implemented locally in the graphical user interface; a second program that 
embeds information associated with thcdisplayahle element into a streaming media jfile; 
and a third program that produces a weh displayable page that embeds a media player 
operable to display a video stream and a software routine that detects a trigger contained 
5 in the video stream and that accesses enhancement infonnation and renders an 
enhancement in response to the trigger. 

Advantageously, the present invention allows easy enhancement of streaming 
video, providing lower cost for creating enhancements and providing new oppoYtuhities 
for increased viewer enjoyment, and for increased revenue generation through advertising 
10 links, advertising customization, and interactive promotions. 

Description of the Figures 

hi the figures, 

1 5 Figure I depicts the functional environm©[« of fee present invention. 

Figure 2 depicts a trigger management window. 

Figure 3 depicts a trigger window with a selected \ddeo file and one enhancement 
element 

Figure 4 is a flowchart of a method for selecting an element in the video window. 
20 Figure 5 is a flowchart of a method for moving and/or resizing an element in the 

video window of the trigger screen. 

Figure 6 depicts a trigger window reflecting a second video time and an element 
at a second position. 

Figure 7 depicts a third video time with text placed in the video window. 
25 Figure 8 is a functional stmunary of one embodiment of the present invention. 

Detailed Description of the Invention 

30 Enhanced content is typically presented using a combination of HTML. 

JavaScript, Java and other web technologies. Presentation of enhanced content with 
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Streaming media requiies that enhanced content be authored, scheduled, previewed, and 
output to an enhanced streaming media Ifile in a format suitable fpr web display. 
Authoring comprises selection of elements such as text, graphics, and images and 
placement of the elements in relation to/a displayed video image. Scheduling refers to 

5 specification of a time, video frame, or other indication, when enhancements may be 
displayed. Previewing enhancements may comprise accessing memory containing 
enhancement information, producing a file of enhancements and triggers, and employing 
a browser to view the enhancement. Alternately, enhancement information may be stored 
in a database and may be accessed to produce a file of enhancements and triggers. Output 

10 of an enhanced streaming media file may comprise inserting trigger information into a 
video stream and providmg an HTML/Javascript wrapper page that embeds a streaming 
media player and includes software code to interpret the trigger information, access 
enhancement information and render enhancements, . 

Figure 1 depicts the fimctional.environment of the present invention. Environment 

15 100 comprises enhancement author 102 that operates with browser 104. As shall be 
shown in following figures, enhancement author 102 is employed to select display 
elements, place them in proximity to a video window, define the attributes of the 
elements, and define a time at which they may be rendered. Database 106 may store 
enhancement and project information. An enhancement file 108, that maybe an XML 

20 script file, comprises element information including element attTibutes,.pbsition, and 
time. Enhancement file 108 maybe processed to produce an HTML enhancements file 
110 that may be imported into a streaming media file to produce modified stream 112. 
Modified stream 1 1 2 may then be stored in server 1 1 6 and may be accessed for 
transmission, hi addition, an HTML/Javascript wrapper 1 14 may be created and stored in 

25 server 1 16. 

Figure 2 depicts a trigger management window. Trigger window 200 may be 
accessed through URL 202. Trigger window 200 comprises video window 204 that 
displays streaming media images. A project may be selected or specified through project 
window 206. A streaming video file may be selected with load button 208. Once the 
30 video file is loaded, a frame for enhancement may be accessed employing play button 
210. Play button 210, once selected, provides a pause fimction. Alternately, a firame may 
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be selected by entering a value in time window 212. Further, the controls of a media 
player (controls not depicted) may be employed to select a desired frame. Once a desired 
frame is selected, element window 214 may be employed to>select a text or graphic . 
element from a list of elements. Element window 214 provides a pull-down menu of 

5 elements. Browse button 216 allows selection of a directory where a text or graphic 
element may be accessed. 

Figure 3 depicts a trigger window with a selected video file and one enhancement 
element. A video file has been opened and a display time selected Video window 302 
shows the video image that reflects the time shown in time window 304. Element 306, a 

10 target with arrow, has been placed in the upper left of flie video image area. Information 
describing the time, position, and element are shown in trigger entry 308. When an 
element is selected through the element window, placement may employ manual entry of 
position information for the top left comer of the element through top window 310 and 
left window 312. The tJRL for the element may also be specified through URL window 

15 314. Placement may also employ a mouse or other pointing device. A software routine 
downloaded to the browser, providing faster updates than a server-implemented routine^ 
allows the user to drag an element to a desired position. Further, a resizing function may 
be implemented, allowing the user to alter the size of an element. Figures 4 and 5 depict 
flowcharts for selecting and moving or resizing an element. 

20 Figure 4 is a flowchart of a method for selecting an element in the video window. 

Mouse select process 400 begins with a mousedown (button activation) at step 402. Step 
404 determines if the mouse position is inside the video window when the button was 
activated. If the mouse position is outside the video window, mouse data is passed to 
other programs such as may be employed to select elements or play and pause the video 

25 stream. If the mouse position is inside the video window, step 406 detennines if fli^ 
position is inside the knobs of an element. Knobs are visual elements, such as small 
rectangles, for example, that are displayed at the edges of an element when selected. If 
the mouse is inside a knob, step 408 removess the knobs and the process ends at step 410. 
If step 406 detemaines that flie mouse position is not inside a knob, step 412 detennines if 

30 the mouse position is inside an element. If the mouse position is not mside an element,, 
the process ends at step 414. If step 412 determines that the mouse position is inside an 
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clement, step 416 obtains the element's x and y position, heigbt, and width. Step 41 8 then 
detennines if the user selected a different element. If a different element was selected, 
step 420 deselects the previous selection and the process sends at step 422. If the user did 
not select a difference element, the new element is selected at step 424 and the process 

5 ends at step 426. 

Having selected an element displayed in the image area using the process of . . 
figure 4, a user may now move or resize the element Figure 5 is a flowchart of a method 
for moving and/or resizing an element in the video window of the trigger screen. Move 
and resize process 500 begins with step 502 where a mousemove event is received, A . 

JO mouse move event occurs when a mouse button is activated while the mouse is 

positioned over an element and the mouse is moved. Step 504 detennines if the mouse is 
positioned over a resize knob displayed in conjunction with a selected element. If step 
504 determines that the mouse position does not correspond to a knob, step 506 moves 
the element using mouse movement infomiation. The size of the element is not altered 

15 and processing ends at step 508, If the position of the mouse corresponds to a knob of the 
element, step 510 checks if the knob corresponds to a west (let side) knob. If the west 
knob is selected, step 512 checks if the west knob is a lower left knob. If the knob is not 
the lower left knob, step 514 resizes the element by changing the left coordinates of the 
el^ent and keeping the right edge position and height of the element Unchanged.. 

20 Processing then ends at step 516, If step 512 detemrines that a lower left knob is selected, 
step 518 adjusts the height and width of the element, maintaining the aspect ratio of the 
element and the position of the upper right comer of the element Processing then ends at 
step 516. If step 510 deteraiines that the west knob is not selected, step 520 checks if the 
east knob (right side) was selected. If the east knob is selected, step 522 checks if the east 

25 knob is an upper right knob. If the knob is not an upper right knob, step 524 resizes the 
element by changing the right coordinates of the client and keeping the left edge 
position and height of the element unchanged. Processing then ends at step 526. If step 
522 detennines that an upper right knob is selected, step 528 adjusts the hei^t and width 
of ihe element, maintaining the aspect ratio of the element and the position of the lower 

30 left comer of the element. Processmg then ends at step 526. If step 520 determines that an 
east knob is not selected, step 530 checks if a north knob is selected. If a north knob is 
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selected, step 532 checks if the upper ]eft knob was selected. If the upper left knob was 
not selected, step 534 resizes the element by changing flie top coordinates and keeping 
the bottom coordinates and width of flie elem«)t unchanged. Processing then ends at step 
536. If step 532 detennines that the upper left knob was selected, step 538 adjusts the 
5 height and width of the element while maintaining the aspect ratio of the element and the 
position of the bottom right coordinate. Processing then ends at step 536. If step 530 
detennines that a north knob was not selected, step 540 checks if a lower right knob was 
selected. If a lower ri^t knob was not selected, step 542 adjusts the height of the 
element, keep the width and top coordinates unchanged..Processing then ends at step 544, 

10 If step 540 determines that the knob is a lower right knob, step 546 adjusts the height and 
width of the element while maintaining the aspect ratio of the element and the position of 
the top left coordinate. Processing then ends at step 544, Appendix A lists code to 
implement the 'drag and drop' and 'resize' functions described in figure 4 and figure 5, 
Figure 6 depicts a trigger window reflecting a second video time and an 

1 5 element at a second position, ha jSgure 6 the video has been advanced to the time shown 
in time window 602. Entploying the 'drag and drop' functions described in figure 4 and 5, 
the target with anrow clement 604 bas'been moved to a position in the lower right of 
video window 606. Trigger entry 608 lists the time» position and element information for 
the newly positioned element. 

20 Figure 7 depicts a third video time with text placed in the video window. In figure 

7 the video has been advanced to the time shown in time window 702. Text 704, showing 
'Caption Text', has been placed in video window 706. Trigger entry 708 lists ttie time, . 
position and element information for the newly positioned text element Font and type 
size are specified in trigger entry 708, A user may preview enhancements by selecting 

25 preview button 710. Preview mode creates an enhanced streaming media file and 
HTML/Javascript wrappw^ as previously described. 

Figure 8 is a functional summaiy of one embodiment of the present invention. 
Steps 800 to 808 depict creation of an enhanced video stream. Steps 810 to 816 depict . 
utilizatioji of an enhanced video stream. At step 800, a video firame of a video file is 

30 selected. At step 802, enhancements are selected and positioned in one or more video 
firames. At step 804, a script containing triggers and element description is produced-. At 



wo 02/17643 



9 



PCT/LSOl/41897 



Step 806, the trigger script information is embedded in the video stream and an 
HTML/Javascript page is created. At step 808, the embedded video stream and 
HTML/Javascript page is stored in a server At step 810, an enhanced stream is 
transferred across a network, which may be the hitemet or other network, in response to a 
5 user selecting a URL or other locator containing the enhanced streaming video file. When 
the file is loaded, stream monitor 812 and trigger handler 814 are loaded to the viewer's 
system. Stream monitor 812 delivers streaming media to the user^s media player while 
monitoring the stream for trigger information. When a trigger is found, trigger handler 
814 may access a URL contained in the trigger to access enhancement information and 

10 then render the enhancements on media player 816. 

Figure 8 depicts an embodiment where trigger information is embedded in the 
video stream, and an HTML/Javascript program interprets trigger infonnation, including 
a locator such as a URL, to access enhancement infonnation that is then rendered. In 
another embodiment, the embedded video stream may be modified to contain both 

15 triggers and enhancement information. In yet another embodiment. The ETTML/Javascript 
page may be configured to monitor time infonnation from a media player and to compare 
the time information with a Ust of trigger times contained in the HTML/Javascript page 
file, and to access and render enhancements when a listed trigger time occurs. 
Embodiments that employ a locator to access enhancement infonnation may also 

20 comprise pre-fetching of enhancement information to accommodate access latencies. One 
pre-fetch embodiment may employ a 'pre-triggei' that results in the enhancement 
information for an upcoming trigger to be accessed. Another pre-fetch embodiment may 
access infonnation for a next trigger when a cimrent trigger has been executed. Yet 
another pre*fetch embodiment may define a buffer, such as a FIFO, for example, and may 

25 access enhancement infonnation in response to a FIFO pointer value. 

The above-described authoring methods may employ a web browser such that 
users may remotely access the authoring and preview functions. The editing functions 
described provide a base set of capabilities. The elements selected through the element 
window 214 of figure 2 may include executable elements, such as animated sequences, 

30 Additional capabitities such as those described in flie referenced, application entitled 
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'SYSTEM AND METHOD FOR WEB BASED ENHANCED INTERACTIVE 
TELEVISION CONTENT PAGE LAYOUT may be employed. 

The foregoing desoripiioB of the invention has been presented for pniposes of 
illustration and description. It is not int«ided to be exhaustive or to limit ttie invention to 

5 ihe precise foim disclosed, and other modifications and variations may be possible in 
light in the above teachings. The embodiment was chosen and described in order to best 
explain the principles of the invention and its practical application to thereby enable 
others skilled In the art to best utilize the invention in various embodiments and various 
modifications as are suited to the particular use contemplated- It is intended that' the 

10 appended claims be construed to include other alternative embodiments of the invention 
except insofar as limited by the prior art 
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APPENDIX A - CODE EXAMPLE FOR CLICK.& DRAG TO PLACE 
ELEMENTS AND TO RESIZE THEM 

Note: Numerical references shown in bold after '/P relate the section of code to a 
5 component of the figures. The figures are representative of the actions performed and 
may not reflect the exact order or fiinctions perfomed. 



function mouseDownO //400 
10 { 

//404: Was the MouaeDown inside of the DivPg (Canvas) ? 

if ( event. X >= divPg.off eetLef t + divMain.of f eecLef t 

ScSc event, X divpg,off setLeft - 0 divPg.off setWidch + 
15 divMain - of f eetLef t 

&& event. y >= divPg.off setTop + divMain.of f aecTop 
Sc& event. y <= divPg,of f aetXop - 0 + divPg.off setHeight + 
, divMain.of fsetTop ) 
{ 

20 // Yea. 

var el = event . srcElement; 
var pEl =; el .pairentBlecnent; 
var i; 

var isText = false; . 



25 



//406t Are we positioned inside a knob? 



if (el.id.indexOf (" knob«, 0) o) 

{ ~ 

30 // 408 Yea, we are on a knob, and the user wants to reeize 

Che elemenc- 

initlx = event -clientX; 
initlY = event .clientY; 

35 knob == el; 

hideKnobs ( ) ; 

MouseDownOnBleinent k true; 

} 

else //4X2; . 
40 { 

while (true) 
{ 

if (el.tagName == "BODY") return; 
if (pEl,tagName == "BODY") return; 
45 if (pEl.tagName "Divw 

pEl.id.indexOf {»'divEl»*)>=0) break; 

el = pEl; 

pEl « el.parentElement; 

} 

50 

if (el.tasName "MV") 
{ // TEXT AREA 
Ob =: el - style ; 

} 

55 elee 
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{ 

Ob =• pEl. style; 

} 

//416 

initlX = event .cliencX; 
initlY = event. client Y; 

iniclObjX = ob.poaLefC; 
iniclObjy ^ ob.posTop; 

elWidth = el.offBetWidch; 
elHeight = el .off getHeight ; 
elName = el. id; 
i a elName. slice (5) ; 



//418: Did the user select a different eleinent ? 
if (eleroexitSelected «= i) 

{ 

MouseDownOnElement - true; 
20 // 420: Change to newly selected element 

elenientSelected = i; 
aelectElement (i) ; 
hideKnobs ( ) ; 

} 

25 else //424 

{ 

var updated = true; 

//***** update display with selected element 
if (elementSelected > -1) 
30 { 

updated = updEls (eleraentSelected) ; 

} 

if (updated) 
35 { 

MouseDownOnElement = true; 

// Change to newly selected element 
elementSelected = i; 
40 s elect El ement (i) ; 

hideKnobs ( ) ; 



45 



function mouseMove { ) / / 5 0 0 
50 { 

if (MouseDownOnElement) 

{ 

var fp = window. frmBlPropS; 

var pEl; 

55 var elType; 

if (knob) //504 
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} 

else 

10 . { 



} 



{ 

var e eval ("window, el Img** t elementselected) ; 
elType = parseint {elements [elementSelected] [eElType] ) ; 
if ( elType " KElIsTA ) 
{ 

pEl = €; 
e = e. style; 



pEl ^ e-parentBlement; 



var delta; 

IS switch (knob.style.crursor) 

{ 

case "w-resize": //sio 
{ 

delta = initlX - event- cllentX; 
20 if (elType U kElIsTV) //S12 

{ 

if (pEl. style. pixell/efc - delta <= 

0) //518 

{ 

25 delta - pEl . style .pixelLeft; 

pBl. style. pixelliefc - 0; 

) 

else 

{ 

30 pEl. style. pixelLeft -= delta; 

} 

} 

switch ( elType ) //514 

35 case IcElIsGraphic: 

case XElIsBG: 

e. width += delta; 
break; 
case kBlIsTA: 

40 e. width = 

Math. abs (parseint (e. width) + delta) + "px"; 

break; 
case kEllsTV; //5X8 

// Compute available WEST & South 



45 pixels 

(pEl. style, pixelTop + ©.height); 
50 (9Canva6H/gCanvaew)*delta > Spx ) 



var Wpx = pE1.3tyle .pixelLeft; 
var Spx = gCanvasH - 

while ( delta > t^x || 
{ 



--delta; 

if (delta 0> break; 

} 

55 pEl, style -pixelt-eft -= delta ? 

e,vidth +» delca; 
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(gCanvaeH/gCanvasW) ; 



e. height = e, width 



break ; 



case "e-resize" 



break; 
default : 
break; 



7/520 



10 



15 



20 



25 



gCanvasW ) 



pEl. style. pixelLeft; 



var w; 

delta = event. clientX - initlX; 

switcn( elType ) //522 

{ 

case kElIsGraphic: //524 
caee kElIsBG: 

w = e. width + delta; 

if { pEl.style.pixelLefc + w > 



{ 



} 



w = gCanvasW - 



delca) ; 
30 gCanvaeW ) 



e. width = Wf 
break; 

case kEllsTA: //524 

w EC Ma th.abs (pars elnt(e. width) + 

if ( pBl. 6 cyle, pixelLeft + w >=: 



35 



40 



pBl . style .pixeltief t ; 



pixels 



{ 



w n gCanvasW 



e. width = w + "px"; 
break; 

case kElIsTV; //528 

// Compute available EAST & South 



(pEl. style. pixelLeft + e, width) ; 
(pEl. style -pixelTop + e, height) ; 
45 (gCanvaeH/gCanvaoW) •delta > Spx > 



var Epx = gCanvaeW - 
var spx = gcanvasH - 
while ( delta > Epx || 



{ 



--delta; 

if (delta 0) break; 



50 



55 



(gCanvasH/gCanvasW) ; 



e. width +- delta; 

e, height = e, width * 



} 

break; 



break? 
default i 
break; 
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case "n-resize": //530 

{ 

var h; 

5 delta 5= initlY - event -clientY 

if (elType i= kEllsTV) //532 

if (pEl. style. pixelTop - delta < 0) 
10 { 

delta S5 pEl,0cyXe.pixelTop; 
pEl .ecyle.pixelTop = 0; 

} 

else 

15 { 



} 



pBl. style, pixelTop -» delta; 
} 



35 (pEl. style. pixelLefc -f e. width) ; 
(gCanvasW/gCanvasH) *delta > wpx ) 



20 switch ( el Type ) //534 

{ 

case kElIsGraphic: //53B 
case }c£lIS5G: 

e. height += delta; 
25 break; 

case kElIsTA: //538 

e. height « 

Math. abs (par Beinc <e-height) + delta) + "px"; 

break ; 

30 case kElIsTV: 

// Corapuce available NORTH & West 

pixels 

var Npx = pEl . style .pixelTop; 
var Wpx s= gCanvaaW - 

while < delta > Wpx. | [ 
{ 

- -delta; 

40 if (delta « 0) break; 

} 

pBl.style.pixelTop delta; 
e -height += delta; 
e. width = e, height * 

45 (gCanvasW/gCanvasH) ; 

break; 
default: 
break; 

} 

50 break; 

} 

case "s-resize" : 

{ 

var- h; 

55 delta = event . client Y - initlY; 

- switch ( elType ) //540 

{ 
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10 



15 



20 



25 



30 



35 



40 



45 



50 



55 



caee kElXaGraphic: //542 
case kElXsBG; 

h * e. height + delta; 

if( pEl .style. pixelTop + h > 



gCanvasH ) 

pEl .style . pixelTop ; 



{ 



} 



gCanvasH 



h; 



delta) ? 
gCanvasH ) 

pEl . style .pixelTop) , 



e . height 
break; 

case JcElIsTA; //542 

h = Math. aba (parseint (e. height) + 

if { pEl- style. pixelTop + h > 



{ 



) 



h = {gCanvasH - 



h f "px" 



e. height 
break; 

case kEllBTV: //546 

// Compute available SOUTH & West 



pixels 

(pEl.etyle.pixelLeft + e. width); 
(pEl , style .pixelTop + e . height) ; 
(gCanvaaW/ gCanvasH) *delta > Wpx ) 



(gCanvasW/ gCanvasH) ; 



var Wpx = gCanvaeW - 
var Spx = gCanyasH - 
while ( delta > Spx | | 

{ 

--delta; 

if (delta o) break; 

> 

e. height += delta; 
e. width = e, height * 



break; 
default: 
break; 
) // switch ( eliype ) 
break; 
} // caae e-resisei 

} // switch ( kaob.ecyle. cursor ) 

var el = elements [element Selected] ; //506 



ss elleElLeft] =2 pEl .style -pixelteft; 
=» el(eElTopj =s pEl . style .pixelTop; . 
« el[eElWidth] = (elType kElIsTA ? 



£p . txtLef c .value 

f p , tx tTop . va lue 

f p . txtwidth -value 
parseint (e .width) : e, width); 

fp. txtHeight,value = el [eBlHeight] (elType 
pareelnt (e -height) : e. height); 
] 



kBlISTA ? 



if (ob) 
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if (ob,pixelLeft + -evened ientX - initlx < 0) 
ob.pixelI»efc « 0; 

else 

ob.pixellieft += event -clientX - initlX; 

if (ob.pixelLeft + elWidth + event .client X - initlX > 
window. divPg . client Width) 

ob.pixelLeft » window, divpg. clientWidth - elWidth; 

if (ob.pixelTop + event ,cliencY - initlY < 0) 
ob.pixelTop = 0; 

else 

ob.pixelTop event .clientY - initlY; 

if (ob.pixelTop + elHeight -♦- event .clientY - initlY > 
window , divPg . clientHeight ) 

ob.pixelTop = window. divPg. clientHeight - elHeight; 

20 fp. txtLef t.value - elements [elementSelecced] [e£llieftl - 

ob . pixelLef t ; 

fp.txtTop.value ^ elements [elementSelecced] [eElTopl 

ob.pixelTop; 
} 



10 



15 



25 



initlx = event .clientX; 
initlY = event .clientY; 

} 



30 return false; 
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Claims 

What is claimed is: 

1 . A method for creating an enhanced streaming media file comprising: 

defining a first window in a graphical user interface; 
displaying a streaming video file in a media player window contained in 
said first window; 

pausing said media player at one frame of a plurality of firames comprising 
said streaming video file; 

placing a displayable element at a position in said first window employing 
a pointing device and employing a drag and drop function responsive to an input ficom 
said pointing device^ said drag and drop function implemented locally in said 
graphical user interface; 

creating an enhancement file containing information related to said 
displayable element^ and said one frame; 

modifying a file containing a video stream to produce a modified video 
stream file containing a trigger comprising information that identifies a video frame 
to be enhanced and a locator indicating where enhancement information may be 
accessed; and 

embedding a media player and a software routine in a web displayable 
page wherein said media player is operable to display a video stream, and said 
software routine is operable to detect a trigger in said video Btream, to access 
enhancement information employing a locator in said video stream, and to render., 
enhancements defined by said enhancement information. 

2. The method of claim I wherein said step of embedding fiirther comprises: 

creating an HTML/Javascript web page containing said media player and 
said software routine. 

3. The method of claim 1 further comprising: 
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employing a resize flmction impleoaented locally in said graphical iiser 
interface to alter the size of said displayable element 

4. The method of claim 1 wherein said streaming media file further comprises: 

a streaming media file conforming to Microsoft ASF format. 

5. The method of claim 1 where said enhancement file further comprises: 

an XML compliant script file. 

6. The method of claim 1 further comprising: 

employing a database to store information describing said displayable 
element, and said one firame. 

7. The method of claim 1 further comprising: . . . - 

saving said modified video stream file and said web displayable page on a 

server. 

8. The method of claim 1 wherein a link is associated with said displayable clement, 

9. The method of claim 1 wherein said displayable element is an imported element. 

10. An enhanced streaming media file created by the steps of: 

defining a first window in a graphical user interface; 
displaying a streaming video file in a media player window contained in 
said first window; 

5 pausing said media player at one fi-ame of a plurality of frames comprising 

said streaming video file; 

placing a displayable element at a position in said first window employing 
a pointing device and employing a drag and drop fimction implemented locally in 
said graphical user interface; 
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10 creating an enhancement file containing infonnation related to said 

displayable element, and said one frame; 

modijfying a file containing a video stream to produce a modified video 
stream file containing a trigger comprising infonnation that identifies a video frame 
to be enhanced and a locator indicating where enhancement infonnation may be 

15 accessed; and 

embedding a media player and a software routine in a web displayable 
page wherein said media player is operable to display a video stream, and said 
software routine is operable to detect a trigger in said video stream, to access 
enhancement infonnation employing a locator in said video stream^ and to render 

20 enhancements defined by said enhanconent infonnation. 

11. The enhanced streaming media file of claim 10 wherein said step of embedding 
fiirflier comprises: 

creating an HTML/Javascript web page comprising said media player and 
said software routine. 



5 



12. The streaming media file of claim 10 wherein said aihancement file is a text file. 

13. The streaming media file of claim 10 further comprising the step of: 

saving said modified video stream file and said web displayable page on a 

server. 

14. The streaming media file of claim 10 wherein said enhancement file further 
comprises: 

an XML compliant script file. 

1 5. A system for creating an enhanced streaming media file comprising: 

a computer; 
a web browser; 

a graphical user interface disposed in said browser; 
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a streaming media player disposed in said graphical user interface; 

a first program associated with said graphical user interface that allows a 
user to select a displayable element and to position said displayable element over 
an image displayed by said streaming media player, said first software program 
farther provides a function to alter the position of said displayable clement in 
response to input from a pointing device, said function implemented locally in 
said graphical user interface; . 

a second program that embeds ii^onnation associated with said 
displayable element into a streaming media file; and 

a third program that produces a web displayable page that embeds a 
media player operable to display a video stream and a software routine that 
detects a trigger contained in said video stream and that accesses enhancement 
information and renders an enhancement in response to said trigger. 

16. The system of claim 15 furflier comprising: 

a preview fimction that employs said second program and said third 
program to display an .enhanced video stream on said web browser. 

17. The system of claim 15 wherein said first program further comprises: 

a resize function implemented locally in said graphical user interface that 
allows a user to alter the size of a displayed element 

1 8. The system of claim 1 5 further comprismg: 

a database that stores said information associated with said element. 

19. The system of claim 15 wherein said displayable element is an imported element. 

20. The system of claim 1 5 where a link is associated with said displayable element. 

21. The system of claim 15 wherein said third program further comprises: 
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an HTML/Javascript web page containing said media player and said 
software routine. 

22. A system for embedding enhanced content such as graphics, text captions, 
5 and advertisement insertions in a streaming media file, comprising: 

a trigger management browser operative to pause said streaming media, 
permit enhancements to be placed on said media and to generate triggers indicative of 
said enhancements and embed said trigger in said streaming media file; and 
a host for receiving and storing said enhanced streaming media file for 
10 transnnssion via the Internet to a requesting user; 

said system essentially as set out in the accompany description and Figures. 
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Figure 1 
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Figure 2 
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Figure 3 
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Figure 5 
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Figure 6 
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